<template>
	<view style="display: flex;flex-direction: column;">
		<view @click="goHomePage(item)" class="list_cell" v-for="(item,index) in list" :key="index">
			<image :src="item.userAvatarAbsolute || item.followUserAvatarAbsolute" class="list_img"></image>
			<label class="list_name">{{ item.userName || item.followUserName }}</label>
			<view v-if="userInfo.uid != (type == 'fans' ? item.userId : item.followUserId)"
				style="margin-left: auto;margin-right: 30rpx;">
				<view class="search-right1" v-if="item.followStatus == 0" @click.stop="goCollect(item)">
					<image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/search/add.png" mode=""></image>关注
				</view>
				<view class="search-right2" v-else @click.stop="goCollect(item)">已关注</view>
			</view>
		</view>
		<view v-if="list.length == 0" style="display: flex;flex-direction: column;align-items: center;width: 100%;">
			<image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/comments_null.png"
				style="margin-top: 136rpx;width: 316rpx;height: 316rpx;"></image>
			<label
				style="margin-top: 20rpx;color: #272A37;font-size: 32rpx;">暂无{{type == 'fans' ? '粉丝' : '关注'}}</label>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				userId: '',
				userName: '',
				list: [],
				type: ''
			}
		},
		computed: {
			...mapState(['isLogin', 'userInfo'])
		},
		methods: {
			goHomePage(item) {
				uni.navigateTo({
					url: `/packageMine/pages/homepage/homepage?userId=${(this.type == 'fans' ? item.userId : item.followUserId)}`
				})
			},
			requesList() {
				var cmd = `/mp-api/wx/user/follows/${this.userId}`
				if (this.type == 'fans') {
					cmd = `/mp-api/wx/user/fans/${this.userId}`
				}
				this.request.httpTokenRequest(cmd, null, 'POST', false).then(res => {
					uni.stopPullDownRefresh()
					if (res.code == 0) {
						this.list = res.data
					}
				})
			},
			goCollect(item) {
				var id = ''
				if (this.type == 'fans') {
					id = item.userId
				} else {
					id = item.followUserId
				}
				let form = {
					id: id,
					followStatus: 1,
				}
				if (item.followStatus == 0) {
					form.followStatus = 1
					this.request.httpTokenJsonRequest('/mp-api/wx/user/follow', form, 'POST', true).then(res => {
						if (res.code != 0) {
							this.helper.showToast(res.message)
						} else {
							item.followStatus = 1
						}
					})
				} else {
					uni.showModal({
						cancelText: '取消',
						confirmText: '确定',
						title: '是否确认取消关注此用户？',
						success: (res) => {
							if (res.confirm) {
								form.followStatus = 0
								this.request.httpTokenJsonRequest('/mp-api/wx/user/follow', form, 'POST', true)
									.then(res => {
										if (res.code != 0) {
											this.helper.showToast(res.message)
										} else {
									  item.followStatus = 0
										}
									})
							}
						}
					})
				}
			}
		},
		onLoad(option) {
			if (option.userId && option.userName) {
				this.userId = option.userId
				this.userName = option.userName
				uni.setNavigationBarTitle({
					title: this.userName + '的' + (option.type == 'fans' ? '粉丝' : '关注')
				})
			} else {
				this.userId = this.userInfo.uid
				this.userName = this.userInfo.name || this.userInfo.nickname
				uni.setNavigationBarTitle({
					title: '我的' + (option.type == 'fans' ? '粉丝' : '关注')
				})
			}
			this.type = option.type
			// this.requesList()
		},
		onShow() {
			this.requesList()
		},
		onPullDownRefresh() {
			this.requesList()
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.list_cell {
		height: 136rpx;
		width: 92%;
		margin: 0 auto;
		/* margin-left: 30rpx; */
		width: calc(100% - 60rpx);
		border-bottom: 2rpx #F1F1F1 solid;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.list_img {
		border-radius: 50%;
		height: 56rpx;
		width: 56rpx;
		background-color: #eaeaea;
	}

	.list_name {
		color: #333333;
		font-size: 28rpx;
		margin-left: 20rpx;
		font-weight: 500;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		width: 62%;
	}
</style>
